<!DOCTYPE html>
<html lang="en">
    <head>
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
        <meta charset="utf-8">
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script src = "https://cdn.wilddog.com/sdk/js/2.1.2/wilddog.js"></script>
        <style>
        	*{
        		margin:0px;
        		padding: 0px;
        	}

        	#chatBody{
        		width: 100%;
        		height: 800px;
        		background: #8b8985;
        	}

        	#inputBar{
        		width: 100%;
        		height: 30px;
        		position:fixed;
        		bottom: 0px;
        		background: #fff;
        	}

        	#name{
        		width:50px;
        		height: 100%;
        		float: left;
        	}
        	#input{
        		width: 60%;
        		height: 100%;
        		float: left;
        	}

        	#send{
        		width: auto;
				padding-left:10px;
				padding-right:10px;
        		height: 100%;
        		display: block;
        		background: green;
        		float: left;
        		color: white;
        		text-align: center;
        		line-height: 30px;
        	}
			
			.chatItem{
				width:100%;
				height:30px;
				border:1px solid #d3d3d3;
				border-radius:5px;
				text-align:left;
				line-height:30px;
				padding:1px;
				margin-bottom:1px;
				overflow:hidden;
			}
			
			.chatList{
			    overflow: scroll;
				height: 95%;
			}

        </style>
    </head>
    <body>
    <div id="chatBody"></div>
    <div id="inputBar">
		<input id='name' value="名字"/>
    	<input id='input' />
    	<a id="send">发送</a>
    </div>
    </body>
    <script type="text/javascript">
    console.log('test');
    	$('#chatBody').css('height',window.innerHeight);

    	var config = {
		  syncURL: "https://xiaoheic.wilddogio.com/" //输入节点 URL
		};
		wilddog.initializeApp(config);

		var ref = wilddog.sync().ref();



		

		var chatList = $('<div></div>');
		chatList.addClass('chatList');
		
		ref.on("value", function(snapshot) {
		//	console.log(snapshot.val());
			chatList.html("");
			var chat = snapshot.val().chat;
			
			for(var s in chat){
				var chatItem = $('<div></div>');
				chatItem.addClass('chatItem');
				chatItem.html(chat[s]);
				chatList.append(chatItem);
			}
			
		
		
		    $('#chatBody').append(chatList);
		});
		
		$('#input').on('keydown',function(e){
			if(e.keyCode == 13){
				if($('#input').val() == "") return 
				wilddog.sync().ref("chat").push($('#name').val() + ":" + $('#input').val())
					.then(function(newRef){
					})
					.catch(function(err){
					   console.info('remove node failed', err.code, err);
					});
				$(this).val("");
			}
		});
		$('#send').on('click',function(){
		if($('#input').val() == "") return 
	
		//console.log('click');
			wilddog.sync().ref("chat").push($('#name').val() + ":" + $('#input').val())
				.then(function(newRef){
				})
				.catch(function(err){
				   console.info('remove node failed', err.code, err);
				});
			$('#input').val("");
		});

    </script>
</html>